<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮廓</title>

        <style type="text/css">
            .wrapper { border: 1px solid blue ; width: 600px ; height: 200px ; margin: 25px auto ;}
            
            /* 亲子选择器 ( 亲爸爸 和 亲儿子 之间 使用 > 连接 )*/
            .first>input { width: 100px ;  height: 50px ; }
            .first>select { width: 300px ; height: 50px ; }
            .first option { height: 50px ; }
            .first>textarea { width: 500px ; height: 60px ; resize: none ; }

            .second>div {
                height: 100px ;
                margin: 25px ;
                border: 5px solid red ;
                outline: rgba(200,200,200,0.5) solid 5px ;
            }

            .third>div {
                height: 100px ;
                margin: 25px ;
                border: 5px solid red ;
                outline: rgba(200,200,200,0.5) solid 5px ;
                outline-offset: 15px ;
                border-radius: 50% ;
            }

        </style>

    </head>
    <body>

        <div class="wrapper first">
            <input type="text" >
            <input type="radio" >
            <input type="checkbox" >
            <input type="button" value="按钮">
            <br>
            <select>
                <option value="guangdong">广东</option>
                <option value="jiangxi">江西</option>
                <option value="hubei">湖北</option>
            </select>
            <br>
            <textarea></textarea>
        </div>

        <div class="wrapper second">
            <div></div>
        </div>

        <div class="wrapper third">
            <div></div>
        </div>
        
    </body>
</html>